<template>
  <div class="carManage">
    <div class="mainPage" v-if='!isAdd'>
      <div class="search">
        <el-form :inline="true" :model="wastes" class="demo-form-inline companyAdd">
          <el-form-item label="危废名称">
            <el-select v-model='wastes.wfTypeId' placeholder="选择危废名称">
              <el-option v-for='item in wasteList' :key='item.id' :value='item.id' :label='item.name'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="危废代码">
            <el-input v-model="wastes.dangerType" placeholder="危废代码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="default" @click="resetSeachConditions">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type='primary' class='addBtn' @click='addCar'>新增</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="tableData">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop='wfCompanyName' label="产废单位">
          </el-table-column>
          <el-table-column prop='wfName' label="危废名称">
          </el-table-column>
          <el-table-column prop='dangerousType' label="危废代码">
          </el-table-column>
          <el-table-column prop='dpCompanyName' label="处置单位">
          </el-table-column>
          <el-table-column prop='opCompanyName' label="运营单位">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click='wasteUpdate(scope.row)'>修改</el-button>
              <el-button type="text" size="small" @click='wasteDelet(scope.row.id)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="carAdd" v-if='isAdd'>
      <el-button type='private' size='small' @click='goBack'>返回</el-button>
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="产废单位" prop="wfName" class='wfCompany'>
          <el-input v-model='addForm.wfName'></el-input>
        </el-form-item>
        <div style="display: flex;justify-content: space-between;width: 50%;margin: 20px auto;">
          <div class="list" style="width: 50%;" v-for='item in alreadyRelationList'>
            <el-form-item label="危废名称">
              <el-input v-model='item.wfName' disabled></el-input>
            </el-form-item>
            <el-form-item label='处置单位'>
              <el-input v-model='item.dpCompanyName' disabled></el-input>
            </el-form-item>
            <el-form-item label='运营单位'>
              <el-input v-model='item.opCompanyName' disabled></el-input>
            </el-form-item>
          </div>
          <!-- 这是修改啊 -->
          <div class="list" style="width: 50%;" v-if='isUpdate'>
            <el-form-item label="危废名称">
              <el-input v-model='updateWfName' disabled></el-input>
            </el-form-item>
            <el-form-item label='处置单位'>
              <el-select v-model="updateCZcompany" filterable placeholder="请选择">
                <el-option v-for="item in czCompanyList" :key="item.id" :label="item.companyName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label='运营单位'>
              <!-- <el-input v-model='updateYYcompany'></el-input> -->
              <el-select v-model="updateYYcompany" filterable placeholder="请选择">
                <el-option v-for="item in yyCompanyList" :key="item.id" :label="item.companyName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 下面循环未关联的 -->
        <div style="display: flex;justify-content: space-between;width: 50%;margin: 20px auto;" v-if='!isUpdate'>
          <div class="list" style="width: 50%;" v-for='(item,index) in noRelation'>
            <el-form-item label="危废名称">
              <el-input v-model='item.name' disabled></el-input>
            </el-form-item>
            <el-form-item label='处置单位'>
              <!-- <el-input v-model='item.dpCompanyName'></el-input> -->
              <el-select v-model="item.czValue" filterable placeholder="请选择">
                <el-option v-for="item in czCompanyList" :key="item.id" :label="item.companyName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label='运营单位'>
              <!-- <el-input v-model='item.opCompanyName'></el-input> -->
              <el-select v-model="item.yyValue" filterable placeholder="请选择">
                <el-option v-for="item in yyCompanyList" :key="item.id" :label="item.companyName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <el-form-item class='btnList'>
          <el-button @click='onSubmit("addForm")' type='primary'>确定</el-button>
          <el-button @click='cancleUpdate'>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      updateWfTypeId: '',
      updateWfId: '',
      updateId: '',
      updateYYcompany: '',
      updateCZcompany: '',
      updateWfName: '',
      czCompanyId: '',
      ysCompanyId: '',
      page: 1,
      limit: 10,
      tableData: [],
      wastes: {
        dangerType: null,
        wfTypeId: null
      },
      addForm: {
        wfName: '',
        czCompany: '',
        yyCompany: '',
        wasteName: '',
        industrys: '',
        wasteType: '',
        wasteCode: '',
        dangerousType: '',
        wasteSpecial: '',
        wasteForm: '',
        packageType: '',
        measure: '',
        purpose: [],
        id: ''
      },
      rules: {
        wasteName: [{
          required: true,
          message: '请填写危废名称',
          triggle: 'blur'
        }],
        industrys: [{
          type: 'number',
          required: true,
          message: '请选择行业类型',
          triggle: 'change'
        }],
        wasteType: [{
          required: true,
          message: '请危废类别',
          triggle: 'change'
        }],
        czCompany: [{
          required: true,
          message: '请填写危废代码',
          triggle: 'blur'
        }],
        yyCompany: [{
          required: true,
          message: '请填写危险废物',
          triggle: 'blur'
        }],
        wasteSpecial: [{
          required: true,
          message: '请填写危废特性',
          triggle: 'blur'
        }],
        wasteForm: [{
          required: true,
          message: '请填写危废形态',
          triggle: 'blur'
        }],
        packageType: [{
          required: true,
          message: '请包装方式',
          triggle: 'blur'
        }],
        measure: [{
          required: true,
          message: '请填写禁忌与措施',
          triggle: 'blur'
        }],
        purpose: [{
          type: 'array',
          required: true,
          message: '请选择外运目的',
          triggle: 'change'
        }],

      },
      isAdd: false,
      currentPage: 1,
      total: 0,
      wasteList: [],
      industryList: [],
      isUpdate: false,
      alreadyRelationList: [],
      alreadyRelationListCompanyId: [],
      noRelation: [],
      czCompanyList: [],
      yyCompanyList: []

    }
  },
  created() {
    this.initList()
  },
  mounted() {
    // 获取所有行业
    // this.$common.$ajax('/sys/industry/list', {}, 'get').then(res => {
    //   console.log(res.data.body);
    //   this.industryList = res.data.body
    // })
    // 获取危废类型
    this.$common.$ajax('/wf/wastetype/wastetype', {}, 'get').then(res => {
      console.log(res.data.body)
      this.wasteList = res.data.body
    })
    this.addForm.wfName = localStorage.companyName;

    // 获取处置公司信息
    this.$common.$ajax('/sys/company/select', { companyType: 2 }, 'get').then(res => {
      this.czCompanyList = res.data.body;
    })
    // 获取运营公司信息
    this.$common.$ajax('/sys/company/select', { companyType: 4 }, 'get').then(res => {
      this.yyCompanyList = res.data.body;
    })
  },
  methods: {
    getArr(val) {
      console.log(val)
    },
    initList() {
      this.$common.$ajax('/sys/company/relation/list', {
        page: this.page,
        limit: this.limit,
        wfTypeId: this.wastes.wfTypeId,
        dangerType: this.wastes.dangerType

      }, 'get').then(res => {
        this.tableData = res.data.body.list;
        this.total = res.data.body.totalCount;
      })
    },
    getCarType() {

    },
    addCar() {
      this.isAdd = true;
      this.isUpdate = false;
      // 获取该公司已经关联的产废
      this.$common.$ajax('/sys/company/relation/list', { page: 1, limit: 10000 }, 'get').then(res => {
        console.log('++++++++++++++++获取已经关联列表+++++++++++++++++++++')
        console.log(res.data.body.list);
        this.alreadyRelationList = res.data.body.list;
        this.alreadyRelationListWasteId = this.alreadyRelationList.map(item => {
          return item.wfTypeId
        })

        console.log(this.alreadyRelationListCompanyId);
        // 在获取该公司全部的危废类型
        this.$common.$ajax('/wf/wastetype/company/wastetype', { companyId: localStorage.czCompanyId }, 'get').then(res => {
          console.log('所有类型')
          console.log(res.data.body)
          var noneRelation = [];
          var allData = [];
          allData = res.data.body;

          allData.forEach((item, index) => {
            console.log('===============')
            console.log(item)
            for (var i = 0; i < this.alreadyRelationListWasteId.length; i++) {

              if (item.id == this.alreadyRelationListWasteId[i]) {
                allData.splice(index, 1)
              }
            }
          })

          this.noRelation = allData
        })
      })


    },
    onSearch() {
      console.log(this.wastes)
      this.initList()
    },
    resetSeachConditions() {
      this.wastes.wfTypeId = null;
      this.wastes.dangerType = null;
      this.initList()
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            //           {
            // "id":9,
            // "wfId":5993,
            //       "wfTypeId": 69,
            //       "opId": 112,
            //       "dpId": 5998,
            //       "isOverdue": false,
            //       "overdueTime": null
            //     }
            this.$common.$ajax('/sys/company/relation/update', {
              id: this.updateId,
              wfId: this.updateWfId,
              wfTypeId: this.updateWfTypeId,
              opId: this.updateCZcompany,
              dpId: this.updateYYcompany

            }, 'post').then(res => {
              this.$message({
                type: 'success',
                message: "修改成功"
              })
              this.reload()
            })
          } else {
            //            {
            //   "wfCompanyId":5993,
            //   "relations":[
            //      {
            //         "wfTypeId": 67,
            //         "opId": 112,
            //         "dpId": 113,
            //         "isOverdue": false,
            //         "overdueTime": null
            //       }
            //     ]
            // }        c
            console.log('打印当前未关联数组')
            console.log(this.noRelation)
            var arr = new Array()
            arr = this.noRelation.map(item => {
              if (item.yyValue != null & item.czValue != null) {
                return {
                  wfTypeId: item.id,
                  opId: item.yyValue,
                  dpId: item.czValue
                }
              }

            })
            arr.forEach((item, index) => {
              if (item == null || item === undefined) {
                // debugger;
                arr.splice(index, 1)
              }
            })
            console.log(arr)
            this.$common.$ajax('sys/company/relation/save', {
              wfCompanyId: localStorage.czCompanyId,
              relations: arr

            }, 'post').then(res => {
              console.log(res.data)
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.reload()
            })
          }
        } else {
          console.log('error')
        }
      })
    },
    // 删除
    wasteDelet(id) {
      this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$common.$ajax('/sys/company/relation/delete', { relationId: id }, 'get').then(res => {
            if (res.data.status === 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

    },
    wasteUpdate(row) {
      console.log(row)
      this.isAdd = true;
      this.isUpdate = true;
      this.updateId = row.id;
      this.updateWfId = row.wfId
      this.updateWfTypeId = row.wfTypeId
      // 赋值
      this.updateWfName = row.wfName;
      this.updateCZcompany = row.dpId;
      this.updateYYcompany = row.opId;
      console.log(this.yyCompanyList)
      // //获取处置公司信息
      // this.$common.$ajax('/sys/company/select', { companyType: 2 }, 'get').then(res => {
      //   this.czCompanyList = res.data.body;
      // })
      // // 获取运营公司信息
      // this.$common.$ajax('/sys/company/select', { companyType: 4 }, 'get').then(res => {
      //   this.yyCompanyList = res.data.body;
      // })



    },
    cancleUpdate() {
      this.reload()
    },
    goBack() {
      this.reload()
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initList()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initList()
    }
  }
}

</script>
<style lang="scss" scoped>
.carManage {
  .search {
    display: flex;
    justify-content: space-between;

    .addBtn {
      height: 40px;
    }
  }
}

.demo-ruleForm {
  width: 100%;
  margin: 0 auto;
}

.btnList {
  text-align: center;
  width: 50%;
  margin: 0 auto;
}

</style>
